<template>
  <div class='u-attr-search' style='width: 100%'>
    <div class='list'>
      <div class='item' v-for='v in courseClassList' :key='v.id'>
        <span class="name">{{ v.name }}</span>
          <el-select clearable class='form-content' v-model='v.selectedClass' v-if='v.value_type === "0"' @change='getChildClasses'>
            <el-option
              v-for='(classes, classesIndex) in v.classes' :key='classesIndex'
              :value="classes.id"
              :label="classes.name"
            />
          </el-select>
          <div v-else class='form-content'>
            <el-input v-model.trim='v.selectedClass' type='text' placeholder="请输入内容" />
          </div>
          <!-- 二级 -->
          <el-select clearable v-model='v.selectedClassChild' v-if='v.value_type === "0" && v.classesChild.length' style='margin-left: 20px'>
            <el-option
              v-for='(classes, classesIndex) in v.classesChild' :key='classesIndex'
              :value="classes.id"
              :label="classes.name"
            />
          </el-select>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'uAttrSearch',

  props: ['isNotGetAttrsData', 'aType'],

  data() {
    return {
      courseClassList: []
    }
  },

  mounted() {
    if (this.isNotGetAttrsData) return false
    this.getAttributes()
  },

  methods: {
    formatAttrsData(data) {
      this.courseClassList = []
      const arr = []
      // 过滤不需要的
      const tmp = data.list.filter(v => v.is_query === '1' && ((v.value_type === '0' && v.value) || v.value_type === '1'))
      tmp.forEach(async v => {
        v.classes = []
        v.selectedClass = ''
        v.classesChild = []
        v.selectedClassChild = ''
        arr.push(new Promise(async resolve => {
          v.classes = await this.getClasses(v.id, v.value_type)
          resolve()
        }))
      })
      Promise.all(arr).then(() => {
        this.courseClassList = tmp.map(v => v)
      })
    },

    $getAttrsData(data) {
      this.formatAttrsData(data)
    },

    async getAttributes() {
      const { code, data } = await this.$api.utilsGetAttributes({
        aMerchantId: this.aFirmId,
        aType: this.aType
      })
      if (code === 0) {
        this.formatAttrsData(data)
      }
    },

    async getClasses(aAttributeId, type) {
      if (type === '1') return []
      const { code, data } = await this.$api.utilsGetClass({ aAttributeId })
      return code === 0 ? data.list : []
    },

    async getChildClasses(aClassId) {
      console.log(aClassId)
      const { index } = this.getAttrByClassId(aClassId)
      // 获取到对应的属性
      const { code, data } = await this.$api.utilsGetClass({ aClassId })
      if (code === 0) {
        this.courseClassList[index].classesChild = data.list
        console.log(this.courseClassList[index])
      }
    },

    getAttrByClassId(value) {
      let obj = {}
      let index = -1
      this.courseClassList.forEach((v, i) => {
        v.classes.forEach(classes => {
          if (classes.id === value) {
            obj = v
            index = i
          }
        })
      })
      return {
        obj,
        index
      }
    },

    clear() {
      this.courseClassList.forEach(v => {
        v.selectedClass = ''
        v.classesChild = []
        v.selectedClassChild = ''
      })
    },

    // 返回 classID 数组
    getData() {
      const arr = []
      this.courseClassList.forEach(v => {
        if (!v.selectedClass && !v.selectedClassChild) return false
        if (v.selectedClass) {
          arr.push({
            aId: v.id,
            aValue: v.selectedClass
          })
        }
        if (v.selectedClassChild) {
          arr.push({
            aId: v.id,
            aValue: v.selectedClassChild
          })
        }
      })
      return arr
    }
  }
}
</script>

<style lang='less'>
.u-attr-search {
  .list {
    display: flex;
    flex-wrap: wrap;
  }
  .item {
    display: flex;
    align-items: center;
    padding-bottom: 20px;
    // margin-right: 5px;
    width: 50%;
    box-sizing: border-box;
    .name {
      width: 80px;
      padding-right: 12px;
      text-align: right;
      font-size: 14px;
      box-sizing: border-box;
    }
  }
  .form-content {
    flex: 1;
  }
}
</style>
